<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/token.js"></script>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>
<body>

<div id="app">
    <el-container>
        <el-main>
            <!-- 表格 -->
            <el-table :data="tableData">
                <el-table-column prop="ptype" label="产品型号" width="120">
                </el-table-column>
                <el-table-column prop="pcraft" label="生产工艺" width="120">
                </el-table-column>
                <el-table-column prop="pamount" label="产品合同数" width="120">
                </el-table-column>
                <el-table-column prop="parea" label="加工面积" width="120">
                </el-table-column>
                <el-table-column prop="pprice" label="加工单价" width="120">
                </el-table-column>
                <el-table-column prop="pmoney" label="加工总金额" width="120">
                </el-table-column>
                <el-table-column prop="pstate" label="生产状态" width="120">
                    <template slot-scope="scope">
                        {{ scope.row.pstate | capitalize }}
                    </template>
                </el-table-column>
                <el-table-column prop="ooid" label="订单编号">
                </el-table-column>
                <el-table-column label="补全">
                    <template slot-scope="scope">
                        <el-button @click="getDataRow(scope.row)" type="text" v-if="scope.row.pstate == 0 ? 'disabled' : ''">补全</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
        </el-main>
    </el-container>
    </el-container>


</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //tableData: Array(20).fill(item),
                dialogFormVisible: false,
                tableData: {
                    pid: '',
                    ptype: '',
                    pcraft: '',
                    pamount: '',
                    psum: '',
                    parea: '',
                    pprice: '',
                    pmoney: '',
                    pstate: '',
                    ooid: '',
                    mid: ''
                },
                sonOrders:[],
                formLabelWidth: '120px',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                tableData:'',
                pageNum:'',
                pageSize:'',
                total:'',
                dialogTableVisible: false
            }
        },
        methods:{
            getAll() {
                axios.get("http://localhost:8001/production/plan/findAll", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                })
                    .then(res => {
                        console.log(res)
                        this.tableData = res.data.list
                        this.pageNum = res.data.pageNum
                        this.pageSize = res.data.pageSize
                        this.total = res.data.total

                    })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.getAll()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val
                this.getAll()
            },
            changeSwitch(row){
                axios.delete(`http://localhost:8080/order/delOrder/${row.oid}/${row.ooo}`)
                .then(res=>{
                    console.log(res)
                    if(res.data === true){
                        this.$message({
                            message:'修改成功',
                            type:"success"
                        })
                    }else{
                        this.$message({
                            message:'修改失败',
                            type:"error"
                        })
                    }
                    this.getAll()
                })
            },
            getDataRow(row) {
                sessionStorage.setItem("plan", JSON.stringify(row))
                location.href = "updateProductPlan.html"
            }
        },
        created(){
            this.getAll()
        },       
        filters: {
            capitalize: function (value) {
                if (value === "1") {
                    return "已完成"
                } else if (value === "0") {
                    return "待补全"
                }
            }
        },
    })
</script>


</body>
</html>